<article class="login">
  <app-loading [loading]="loading"></app-loading>
  <img src="../../assets/images/footer/footer-logo.png" alt="login" class="login-icon">
  <div class="login-con">
    <img src="../../assets/images/header-nav/logo.png" alt="logo">
    <p>Sign in to Admin Panel</p>

    <form [formGroup]="loginForm" novalidate>
      <div class="userName list">
        <input type="text"
               placeholder="Your ID"
               formControlName="userName"
               maxlength="{{ v_userName.maxNum }}">
      </div>
      <div class="errors userName">
        <app-err-msg *ngIf="loginForm.controls.userName?.touched"
                     errs="{{ loginForm.controls.userName?.errors | json }}"
                     errsDefined="{{ v_userName.errMsg | json }}"></app-err-msg>
      </div>
      <div class="password list">
        <input type="password"
               placeholder="Password"
               formControlName="passWord"
               maxlength="{{ v_passWord.maxNum }}"
               (keydown.enter)="loginFun()">
        <button class="toLogin"
                [disabled]="!loginForm.valid"
                (click)="loginFun()">
          <i class="iconfont icon-login"
             [ngClass]="{'canLogin':loginForm.valid}"></i>
        </button>
      </div>
      <div class="errors password">
        <app-err-msg *ngIf="loginForm.controls.passWord?.touched"
                     errs="{{ loginForm.controls.passWord?.errors | json }}"
                     name="password"></app-err-msg>
      </div>
    </form>
    <span class="cut-line"></span>
    <a>Forgot ID or password?</a>
  </div>
  <p class="login-footer">
    <span>Copyright ©2017 安徽格雷皖创信息科技有限公司. All rights reserved</span><span>DC SuperVision v 2.0.0</span></p>
</article>
